<template>
	<view class="">
		<view class="header">
			<view class="header-mask"></view>
			<image :src="Microi.FileServer +TupianPicture_1" mode="aspectFill"></image>
		</view>
		<view class="head displayFlex" :style="{height:winInfo.height-25+'px',paddingTop:winInfo.top-15+'px'}">
			<image @tap="returnTap" style="width: 34rpx" src="/static/return.png" mode="widthFix">
			</image>
			<text>积分</text>
		</view>
		<!-- <view class="Integral">
			<view class="Integral-text">
				我的积分
			</view>
			<view class="Integral-detail displayFlex">
				<text>300</text>
				<view class="Integral-detail-dea">
					<text>积分明细</text>
					<image src="/static/images/huodong/right.png" mode=""></image>
				</view>
			</view>
		</view> -->
		<!-- <view class="signinBox" style="margin: 20rpx 30rpx;">
			<view class="displayFlexSpaceBetween">
				<view class="signinBox-left">
					签到赚积分
				</view>
				<view class="signinBox-right">
					每连续签到7天，可获得额外积分
				</view>
			</view>
			<view class="signinBox-day">
				已连续签到<text>2</text>天
			</view>
			<scroll-view :scroll-x="true" :scroll-y="false" class="scroll " :scroll-into-view="scrollIntoView">
				<view class="displayFlex">
					<view class="signinBox-fullyBox" v-for="(item,index) in dayLisy" :key="index">
						<view class="signinBox-fullyBox-fully">
							<image src="/static/images/my/icon-积分.png" mode=""></image>
							<view class="">
								+10
							</view>
						</view>
						<view class="signinBox-fullyBox-period">
							{{item}}
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="signinBox-sign" @tap="signinTap()">
				<text>签到+10积分</text>
			</view>
		</view> -->
		<view class="Integral">
			<view class="Integral-text">我的积分</view>
			<view class="Integral-detail displayFlex">
				<text>{{ userInfo.Jifen || 300 }}</text>
				<view class="Integral-detail-dea" @tap="goIntegralDetail">
					<text>积分明细</text>
					<image src="/static/images/huodong/right.png" mode=""></image>
				</view>
			</view>
		</view>

		<!-- 签到区域优化 -->
		<view class="signinBox" style="margin: 20rpx 30rpx;">
			<view class="displayFlexSpaceBetween">
				<view class="signinBox-left">签到赚积分</view>
				<view class="signinBox-right">每连续签到7天，可获得额外20积分</view>
			</view>
			<view class="signinBox-day">
				已连续签到<text>{{ continuousDays }}</text>天
				<text v-if="isSignedToday" style="margin-left: 20rpx;color: #666;">今日已签到</text>
			</view>

			<!-- 签到日历优化 -->
			<scroll-view :scroll-x="true" :scroll-y="false" class="scroll" :scroll-into-view="scrollIntoView">
				<view class="displayFlex">
					<view class="signinBox-fullyBox" v-for="(item, index) in signInList" :key="index">
						<view class="signinBox-fullyBox-fully" :class="{
										'signed': item.isSigned,
										'today': item.isToday,
										'future': !item.isPast && !item.isToday
									}">
							<image v-if="item.isSigned" src="/static/images/my/icon-对号@2x.png" mode=""></image>
							<image v-else src="/static/images/my/icon-积分.png" mode=""></image>
							<view class="">{{ item.points }}分</view>
						</view>
						<view class="signinBox-fullyBox-period">{{ item.dayText }}</view>
					</view>
				</view>
			</scroll-view>

			<!-- 签到按钮状态控制 -->
			<view class="signinBox-sign" @tap="signinTap" :class="{ 'signed-disabled': isSignedToday }"
				:disabled="isSignedToday">
				<text>{{ isSignedToday ? '今日已签到' : '签到+10积分' }}</text>
			</view>
		</view>

		<view class="TaskCenterBox" style="margin: 20rpx 30rpx;">
			<view class="TaskCenterBox-top displayFlexSpaceBetween">
				<view class="">
					任务中心
				</view>
				<view class="displayFlex">
					<text>查看更多</text>
					<image src="/static/images/huodong/right.png" mode=""></image>
				</view>
			</view>
			<view class=" displayFlexSpaceBetween" v-for="(item,index) in TaskCenterList" :key="index"
				style="margin-top: 25rpx;" @tap="TaskCenterTap(item,index)">
				<view class="TaskCenterBox-left displayFlex">
					<image :src="item.takeImage" mode=""></image>
					<view class="" style="margin-left: 35rpx;">
						<view class="">
							{{item.takeTitle}}
						</view>
						<view class="displayFlex">
							<image src="/static/images/my/icon-发文章.png" mode=""></image>
							<text>+5积分</text>
							<text>已完成0/1</text>
						</view>
					</view>
				</view>
				<view class="TaskCenterBox-right">
					去完成
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				CurrentUser: this.Microi.GetCurrentUser(),
				Islogin: this.Microi.IsLogin(),
				winInfo: {
					height: 64, //header高度
					top: 26, //标题图标距离顶部距离
					scrollH: 0 //滚动总高度
				},
				userInfo: {},
				TupianPicture_1: '',
				TaskCenterList: [{
					takeImage: '/static/images/my/icon-发文章.png',
					takeTitle: '发文章送积分'
				}, {
					takeImage: '/static/images/my/icon-发文章.png',
					takeTitle: '发活动送积分'

				}, {
					takeImage: '/static/images/my/icon-每日动态.png',
					takeTitle: '每日发送动态'
				}, ],
				dayLisy: ['第1天', '第2天', '第3天', '第4天', '第5天', '第6天', '第7天'],
				signInList: [], // 签到列表数据
				continuousDays: 0, // 连续签到天数
				isSignedToday: false, // 今日是否已签到
				scrollIntoView: '' // 滚动到当前日期
			}
		},
		mounted() {
			let obj = {}
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect()
			// #endif
			// #ifdef MP-BAIDU
			obj = swan.getMenuButtonBoundingClientRect()
			// #endif
			// #ifdef MP-ALIPAY
			my.hideAddToDesktopMenu()
			// #endif
			// #ifdef MP-WEIXIN
			setTimeout(() => {
				uni.getSystemInfo({
					success: res => {
						this.winInfo = res
						this.winInfo.width = obj.left || res.windowWidth
						this.winInfo.height = obj.top ? obj.top + obj.height + 8 : res
							.statusBarHeight + 44
						this.winInfo.top = obj.top ? obj.top + (obj.height - 32) / 2 : res
							.statusBarHeight + 6

						this.winInfo.scrollH = res.windowWidth
						this.winInfo.bottom = res.windowHeight
						console.log('信息：', res)
						console.log('底部信息：', this.winInfo.bottom)
					}
				})
			}, 0)
			this.loading = false
			// #endif
		},
		onLoad() {



		},
		onShow() {
			this.startTime = new Date();

			if (this.Islogin) {
				this.getUserInfo();
				this.getSignInRecord();
			} else {

			}
		},
		methods: {
			returnTap() {
				uni.navigateBack({
					delta: 1
				});
			},
			async getUserInfo() {
				var self = this;
				var res = await self.Microi.ApiEngine.Run('get_UserInfo', {
					YonghuID: self.CurrentUser?.Id
				});
				if (res.Code != 1) {
					self.Microi.Logout();
					return;
				}
				self.userInfo = res.Data;
				console.log('self.userInfo：', self.userInfo);
				// if (self.userInfo.RenzhengZT != '已认证' && self.Islogin) {
				// 	
				// }
				this.getPicture();
			},
			async getPicture() {
				var self = this;
				let res = await self.Microi.FormEngine.GetTableData({
					FormEngineKey: 'diy_picture',
				})
				if (res.Data == 0 || res.Data.length === 0) {
					self.Microi.Tips('暂无相关数据')
					return
				}
				if (res.Code === 1) {
					let BackgroundPoints = null;
					for (let i = 0; i < res.Data.length; i++) {
						const currentItem = res.Data[i];
						if (currentItem.Biaoti === '积分背景') {
							BackgroundPoints = currentItem.Tupian;
						}
					}
					self.TupianPicture_1 = BackgroundPoints;
				}

			},
			TaskCenterTap(item, index) {
				console.log(item, index);
			},
			signinTap() {
				console.log();
			},



			async getSignInRecord() {
				if (!this.Islogin) return;

				try {
					const res = await this.Microi.ApiEngine.Run('getSignInRecord', {
						YonghuID: this.CurrentUser?.Id
					});

					if (res.Code === 1) {
						this.continuousDays = res.Data.continuousDays || 0;
						this.isSignedToday = res.Data.isSignedToday || false;
						this.initSignInList(res.Data.history || []);
					}
				} catch (err) {
					console.error('获取签到记录失败', err);
					this.Microi.Tips('获取签到记录失败');
				}
			},

			// 初始化签到列表（7天数据）
			initSignInList(history) {
				const list = [];
				const today = new Date();

				for (let i = 0; i < 7; i++) {
					const date = new Date();
					date.setDate(today.getDate() - 6 + i);
					const isToday = i === 6; // 最后一个是今天
					const isPast = i < 6; // 前6天是过去
					const dateStr = this.formatDate(date);

					// 检查是否已签到
					const isSigned = history.includes(dateStr);

					// 计算当天积分（连续7天额外奖励）
					let points = 10;
					if (i === 6 && this.continuousDays % 7 === 0 && this.continuousDays > 0) {
						points = 30; // 第7天额外奖励20，共30
					}

					list.push({
						dayText: `第${i+1}天`,
						date: dateStr,
						isSigned,
						isToday,
						isPast,
						future: !isPast && !isToday,
						points
					});

					// 设置滚动到今天
					if (isToday) {
						this.scrollIntoView = `day-${i}`;
					}
				}

				this.signInList = list;
			},

			// 格式化日期为YYYY-MM-DD
			formatDate(date) {
				return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
			},

			// 签到操作
			async signinTap() {
				if (this.isSignedToday) return;
				if (!this.Islogin) {
					this.Microi.Tips('请先登录');
					return;
				}
				try {
					const res = await this.Microi.ApiEngine.Run('userSignIn', {
						YonghuID: this.CurrentUser?.Id
					});

					if (res.Code === 1) {
						this.Microi.Tips(`签到成功，获得${res.Data.points}积分`);
						// 更新本地状态
						this.isSignedToday = true;
						this.continuousDays = res.Data.continuousDays;
						// 更新今日签到状态
						const todayItem = this.signInList.find(item => item.isToday);
						if (todayItem) todayItem.isSigned = true;
						// 更新用户积分
						if (this.userInfo.Jifen) {
							this.userInfo.Jifen = Number(this.userInfo.Jifen) + res.Data.points;
						}
					} else {
						this.Microi.Tips(res.Msg || '签到失败');
					}
				} catch (err) {
					console.error('签到失败', err);
					this.Microi.Tips('签到失败，请稍后再试');
				}
			},

			// 新增：跳转到积分明细
			goIntegralDetail() {

			}
		}

	}
</script>

<style lang="scss">
	page {
		// background: #F4F5F6;
		// z-index: 1;
	}

	.header {
		position: fixed;
		width: 100vw;
		height: 902rpx;
		z-index: -1;
		border-radius: 78rpx;

		image {
			width: 100%;
			height: 100%;
			z-index: -2;
		}

		&-mask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100vw;
			height: 902rpx;
			opacity: 0.5;
		}

		image {
			width: 100%;
			height: 100%;
			z-index: -2;
		}
	}

	.head {
		// position: fixed;
		left: 0;
		width: 100%;
		top: 0;
		z-index: 100;

		image {
			margin: 0 0rpx 0 30rpx;
		}

		text {
			font-weight: 800;
			font-size: 34rpx;
			color: #333333;
		}
	}

	.signinBox {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 35rpx 28rpx;

		// padding: 28rpx;
		&-left {
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			background: linear-gradient(90deg, #FB353B 0%, #FFCFCF 100%);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
		}

		&-right {
			font-weight: 500;
			font-size: 28rpx;
			color: #999999;
		}

		&-day {
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
			margin: 32rpx 0 20rpx;

			text {
				color: #FB353B;
			}
		}

		&-fullyBox {
			width: 124rpx;
			text-align: center;
			flex-shrink: 0;
			margin-right: 15rpx;

			&-fully {
				margin-right: 15rpx;
				background: #FFE6E3;
				border-radius: 20rpx;
				padding: 30rpx 0rpx;

				image {
					width: 44rpx;
					height: 44rpx;
					margin-bottom: 12rpx;
				}

				view {
					font-weight: 800;
					font-size: 32rpx;
					color: #601612;
				}
			}

			&-period {
				margin-top: 12rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #444444;
			}
		}

		&-sign {
			text-align: center;
			margin: 60rpx 0 20rpx;

			text {
				padding: 16rpx 156rpx;
				background: linear-gradient(90deg, #FF7F7E 0%, #FFCBCA 100%);
				border-radius: 80rpx 80rpx 80rpx 80rpx;
				font-weight: 800;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}
	}

	.Integral {
		&-text {
			font-weight: 800;
			font-size: 32rpx;
			color: #444444;
		}

		&-detail {
			text:nth-of-type(1) {
				font-weight: 800;
				font-size: 64rpx;
				color: #FB353B;
			}

			&-dea {
				text:nth-of-type(1) {
					font-weight: 500;
					font-size: 32rpx;
					color: #444444;
					margin: 0 10rpx 0 20rpx;

				}

				image {
					width: 25rpx;
					height: 25rpx;
				}
			}

		}
	}

	.TaskCenterBox {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 28rpx;

		&-top {
			view:nth-of-type(1) {
				font-weight: 800;
				font-size: 32rpx;
				color: #000000;
			}

			view:nth-of-type(2) {
				font-weight: 500;
				font-size: 28rpx;
				color: #999999;

				image {
					margin-left: 10rpx;
					width: 25rpx;
					height: 25rpx;
				}
			}
		}

		&-left {

			image {
				width: 56rpx;
				height: 56rpx;
			}

			view:nth-of-type(1) {
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
			}

			view:nth-of-type(2) {
				font-weight: 500;
				font-size: 24rpx;
				margin-top: 16rpx;

				image {
					width: 26rpx;
					height: 26rpx;
				}

				text:nth-of-type(1) {
					color: #FB7035;
					margin: 0 12rpx;
				}

				text:nth-of-type(2) {
					color: #666666;
				}
			}
		}

		&-right {
			font-weight: 500;
			font-size: 28rpx;
			color: #FB353B;
			background: #FFEDED;
			border-radius: 28rpx;
			padding: 6rpx 30rpx;
		}
	}

	.scroll {
		margin: 0 5px;
	}

	.signinBox-fullyBox-fully.signed {
		background: #FFD1D1;
		position: relative;

		&::after {
			content: '';
			position: absolute;
			top: -10rpx;
			right: -10rpx;
			width: 30rpx;
			height: 30rpx;
			background-image: url('/static/images/my/icon-已签到标记.png');
			background-size: contain;
			background-repeat: no-repeat;
		}
	}

	.signinBox-fullyBox-fully.today {
		border: 2rpx solid #FB353B;
	}

	.signinBox-fullyBox-fully.future {
		background: #F5F5F5;
		opacity: 0.6;
	}

	.signinBox-sign.signed-disabled {
		opacity: 0.7;
		pointer-events: none;

		text {
			background: #CCCCCC;
		}
	}
</style>